import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Button, Row, Col, Icon, message } from 'antd'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom';
import { login } from '../../actions/auth'
import md5 from 'md5';
const FormItem = Form.Item

import './index.less'

const propTypes = {
  user: PropTypes.object,
  loggingIn: PropTypes.bool,
  loginErrors: PropTypes.string
};

class Login extends React.Component {

  constructor (props) {
    super(props);
    this.state = {
      loading: false      // 默认状态为未读取中
    }
  }

  handleSubmit (e) {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({
          loading: true
        });
        const data = this.props.form.getFieldsValue()
    
        this.props.login(data.user, md5(data.password)).payload.promise.then(res => {
          this.setState({
            loading: false
          });
          if (res.error) {
            message.error(res.payload.response.data.message);
          }
          if (!res.error && res.payload.data)  {
            message.success('欢迎光临 ' + res.payload.data.name);
            this.props.history.replace('/home');
          }
        }).catch(err => {
          console.log(err);
          this.setState({
            loading: false
          });
        })
      }
    });
  }

  toRegister () {
    this.props.history.replace('/register');
  }

  render () {
    const { getFieldDecorator } = this.props.form
    return (
      <Row className="login-row" type="flex" justify="space-around" align="middle">
        <Col span="8">
          <Form layout="horizontal" className="login-form" style={{position:'absolute',opacity:0.6,width:'640px',height:'486px',zIndex:0,marginLeft:'-320px',left:'50%',
            marginTop:'-243px',top:'50%'}}>
          </Form>
          <Form layout="horizontal" onSubmit={this.handleSubmit.bind(this)} className="login-form" style={{position:'absolute',background:'none',zIndex:1
            ,width:'520px',height:'366px',marginLeft:'-260px',left:'50%',marginTop:'-243px',top:'50%'}}>
            <h2 className="logo"><span>logo</span></h2>
            <FormItem>
              {getFieldDecorator('user', {
                rules: [ {
                  required: true, message: '请填写账户后提交!',
                }]
              })(
                <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder='请输入您的帐号.' />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('password', {
                rules: [ {
                  required: true, message: '请输入账户密码后提交!',
                }]
              })(
                <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type='password' placeholder='请输入您的密码.' />
              )}
            </FormItem>
            <p>
              <Button className="btn-login" type='primary' size="large" icon="poweroff" loading={this.state.loading} htmlType='submit'>登录</Button>
            </p>
            <p>
              <Button className="btn-register" size="large" icon="right-square-o" htmlType='button' onClick={this.toRegister.bind(this)} >找回密码</Button>
            </p>
          </Form>
        </Col>
      </Row>

    )
  }
}

Login.propTypes = propTypes;

Login = Form.create()(Login);

function mapStateToProps(state) {
  const {auth} = state;
  if (auth.user) {
      return {user: auth.user, loggingIn: auth.loggingIn, loginErrors: ''};
  }

  return {user: null, loggingIn: auth.loggingIn, loginErrors: auth.loginErrors};
}

function mapDispatchToProps(dispatch) {
  return {
    login: bindActionCreators(login, dispatch)
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login))
